<script setup lang="ts">
import CarLocating from "@/components/threeJsComs/carLocating.vue";
import {getAListOfAllBusinesses, getCompanyClass} from "@/api/threeJs/threeJsApi";
import MonitoringLocating from "@/components/threeJsComs/monitoringLocating.vue";
import airDetectionData from "@/pointsDatas/airDetectionData.json";
import publicResourcesData from "@/pointsDatas/publicResourcesData.json";

const props = defineProps({
  parkChangeCode: String
})
watch(
    () => props.parkChangeCode,
    (newVal, oldVal) => {
      monitoringFlag.value = false
      monitoringPosPopUpsFlag.value = false
      businessesArr.value = AllBusinesses.filter(item => item.parkName === newVal)
      businessesClassArr.value = AllBusinessesClass.filter(item => item.parkName === newVal).map(item => item.categories)[0]
      weatherSearchArr.value = AllWeatherSearch.filter(item => item.parkName === newVal)
      publicResources.value = AllPublicResources.filter(item => item.parkName === newVal)

    },
)
let AllBusinesses = []
let businessesArr = ref([])
getAListOfAllBusinesses().then(res => {
  AllBusinesses = res.data
  businessesArr.value = AllBusinesses.filter(item => item.parkName === '小海子产业园')
})
const companiesShow = (info) => {
  window.newThree.flyToCompanies(info.enterpriseName)
}
let AllBusinessesClass = []
let businessesClassArr = ref([])
getCompanyClass().then(res => {
  AllBusinessesClass = res.data
  businessesClassArr.value = AllBusinessesClass.filter(item => item.parkName === '小海子产业园').map(item => item.categories)[0]
})
const companiesClassShow = (info) => {
  window.newThree.flyToCompaniesClass(info.infoVOS)
}
let monitoringFlag = ref(false)
let monitoringPosPopUpsFlag = ref(false)
const displayMonitoring = () => {
  monitoringFlag.value = !monitoringFlag.value
  monitoringPosPopUpsFlag.value = !monitoringPosPopUpsFlag.value;
  carPosPopUpsFlag.value = false;
  window.newThree.monitoringShow(monitoringFlag.value)

}
let AllWeatherSearch = airDetectionData
let weatherSearchArr = ref([])
weatherSearchArr.value = AllWeatherSearch.filter(item => item.parkName === '小海子产业园')
const weatherSearchShow = (info) => {
  window.newThree.weatherSearchShow(true, info)
}
let AllPublicResources = publicResourcesData
let publicResources = ref([])
publicResources.value = AllPublicResources.filter(item => item.parkName === '小海子产业园')
const publicResourcesShow = (info) => {
  window.newThree.publicResourcesShow(true, info)
}
const displayParkIntroduction = (flag) => {
  if (flag) {
    document.querySelector('#parkPage').style.display = 'block'
  } else {
    document.querySelector('#parkPage').style.display = 'none'
  }
}
let carPosPopUpsFlag = ref(false)
const displayCarPosPopUps = (flag) => {
  carPosPopUpsFlag.value = !!flag;
  monitoringFlag.value = false
  monitoringPosPopUpsFlag.value = false
  window.newThree.monitoringShow(false)
}
</script>

<template>
  <div class="box">
    <el-button :class="carPosPopUpsFlag?'btn btnA':'btn'" @click="displayCarPosPopUps(true)">车辆定位</el-button>
    <el-button :class="monitoringFlag?'btn btnA':'btn'" @click="displayMonitoring">实时画面</el-button>
    <el-dropdown placement="left-start">
      <el-button class="btn">
        公共资源
      </el-button>
      <template #dropdown>
        <el-dropdown-menu style="background: transparent!important">
          <el-scrollbar height="300px">
            <el-dropdown-item v-for="item in publicResources" :key="item.name" @click="publicResourcesShow(item)">
              <div class="pic"></div>
              <div class="con"> {{
                  item.resourcesName
                }}
              </div>
            </el-dropdown-item>
          </el-scrollbar>
        </el-dropdown-menu>
      </template>
    </el-dropdown>
    <el-dropdown placement="left-start">
      <el-button class="btn">
        空气检测
      </el-button>
      <template #dropdown>
        <el-dropdown-menu style="background: transparent!important">
          <el-scrollbar height="300px">
            <el-dropdown-item v-for="item in weatherSearchArr" :key="item.name" @click="weatherSearchShow(item)">
              <div class="pic"></div>
              <div class="con"> {{
                  item.airName
                }}
              </div>
            </el-dropdown-item>
          </el-scrollbar>
        </el-dropdown-menu>
      </template>
    </el-dropdown>
    <el-dropdown placement="left-start">
      <el-button class="btn">
        企业列表
      </el-button>
      <template #dropdown>
        <el-dropdown-menu style="background: transparent!important">
          <el-scrollbar height="300px">
            <el-dropdown-item v-for="item in businessesArr" :key="item.name" @click="companiesShow(item)">
              <div class="pic"></div>
              <div class="con"> {{
                  item.enterpriseName
                }}
              </div>
            </el-dropdown-item>
          </el-scrollbar>
        </el-dropdown-menu>
      </template>
    </el-dropdown>
    <el-dropdown placement="left-start">
      <el-button class="btn">
        行业分类
      </el-button>
      <template #dropdown>
        <el-dropdown-menu style="background: transparent!important">
          <el-dropdown-item v-for="(item,index) in businessesClassArr" :key="index"
                            @click="companiesClassShow(item)">
            <div class="pic"></div>
            <div class="con"> {{
                item.industryTypeMajor
              }}
            </div>

          </el-dropdown-item>
        </el-dropdown-menu>
      </template>
    </el-dropdown>
    <el-button class="btn" @click="displayParkIntroduction(true)">园区简介</el-button>
  </div>
  <div id="carPosPopUps" class="popUps" v-if="carPosPopUpsFlag">
    <div class="close" @click="displayCarPosPopUps(false)">x</div>
    <div class="carPosTags">
      <carLocating/>
    </div>
  </div>
  <div id="monitoringPosPopUps" class="popUps monitoringPop" v-show="monitoringPosPopUpsFlag">
    <div class="monitoringPosTags">
      <monitoringLocating :modelCode="parkChangeCode"/>
    </div>
  </div>
</template>

<style lang="less" scoped>
.popUps {
  background-image: url("@/assets/threeJs/images/companiesPageBac.png");
  background-size: 100% 100%;
  box-sizing: border-box;
  left: 43%;
  padding: 1vh 1vw 1vh 1vw;
  position: fixed;
  top: 23%;
  color: white;
  width: 25vw;

  .close {
    color: #cccccc;
    cursor: pointer;
    font-size: 20px;
    position: absolute;
    right: 1%;
    top: 1%;
    z-index: 99;
  }
}

.monitoringPop {
  width: 17vw;
  left: 51%;
  top: 29%;
}

.box {
  display: flex;
  flex-direction: column;
  position: fixed;
  justify-content: center;
  top: 10vw;
  left: 68vw;

  .btn {
    margin: 0 0 10px 0;
    background-image: url("@/assets/threeJs/images/btn2.png");
    background-size: 100% 100%;
    background-color: transparent;
    border: none;
    outline: none;
    color: #ffffff;
    padding: 40px 60px 30px 60px;

    &&:hover {
      background-image: url("@/assets/threeJs/images/btn2A.png");
    }
  }

  .btnA {
    background-image: url("@/assets/threeJs/images/btn2A.png");
  }
}

:deep(.el-dropdown-menu__item) {
  background-color: transparent;
  background-image: url("@/assets/threeJs/images/btn3.png");
  background-size: 100% 100%;
  color: #ffffff;
  margin-bottom: 2px;
  padding: 0;

  .pic {
    background-image: url("@/assets/threeJs/images/btn3I.png");
    background-size: 100% 100%;
    height: 1.6rem;
    width: 1.6rem;
  }

  .con {
    padding: 0.25rem 0.8rem;
  }

}

:deep(.el-dropdown-menu__item:hover) {
  background-color: transparent;
  background-image: url('@/assets/threeJs/images/btn3A.png');
  color: #ffffff;

  .pic {
    background-image: url("@/assets/threeJs/images/btn3AI.png");
  }
}
</style>
